<template>
  <div>
    <div style="height: 40px">
      <h1>交易统计</h1>
    </div>
    <div style="width: 100%">
      <div class="shaixuan_1">&nbsp;

        <span slot="title">交易数据</span>
        <br>
        <h5 style="float:right">单位:万元</h5>

        <div id="main"
             style="margin-left:200px;width: 800px; height: 800px;">
        </div>

        <div id="main1"
             style="margin-left:200px;width: 80%; height: 500px;">
        </div>

      </div>

    </div>

  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'transaction-stat',
  data() {
    return {
      visible: false,
    }
  },
  methods: {
    created() {
      this.$axios
        .get('http://localhost:9527/conversation/findAll')
        .then((res) => {
          console.log(res)
          this.tableData = res.data.data
        })
    },
    a() {
      var chartDom = document.getElementById('main')
      var myChart = echarts.init(chartDom)
      var option

      option = {
        xAxis: {
          type: 'category',
          data: [
            '1月',
            '2月',
            '3月',
            '4月',
            '5月',
            '6月',
            '7月',
            '8月',
            '9月',
            '10月',
            '11月',
            '12月',
          ],
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130, 85, 103, 110, 169, 120],
            type: 'bar',
          },
        ],
      }

      option && myChart.setOption(option)
    },
    b() {
      var chartDom = document.getElementById('main1')
      var myChart = echarts.init(chartDom)
      var option

      option = {
        title: {
          text: '订单来源',
         
          left: 'center',
        },
        tooltip: {
          trigger: 'item',
        },
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '60%',
            data: [
              { value: 1048, name: '图文问诊' },
              { value: 735, name: '电话问诊' },
              { value: 580, name: '视频问诊' },
              { value: 484, name: '预约挂号' },
              { value: 300, name: '复诊开药' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      }

      option && myChart.setOption(option)
    },
  },
  created() {
    this.created()
  },
  mounted() {
    this.a()
    this.b()
  },
}
</script>

<style scoped>
.shaixuan_1 {
  /* border: 1px solid red; */
  margin-right: 200px;
  margin-top: 20px;
  height: 40px;
  font-size: 20px;
  line-height: 40px;
  background-color: rgb(241, 241, 241);
}
#shaixuan_2 {
  border: 1px solid rgb(216, 216, 216);
  margin-right: 200px;
  height: 100px;
}

#text {
  margin-top: 40px;
  margin-left: 20px;
  float: left;
}
#input {
  width: 200px;
  margin-top: 30px;
  float: left;
}
#one {
  margin-top: 30px;
  float: left;
}
#date {
  float: left;
  margin-top: 30px;
  margin-left: 80px;
}
#button {
  float: left;
  margin-top: 30px;
  margin-left: 80px;
}
#shaixuan_1 {
  /* border: 1px solid red; */
  margin-right: 200px;
  margin-top: 20px;
  height: 40px;
  font-size: 20px;
  line-height: 40px;
  background-color: rgb(241, 241, 241);
}
#all {
  margin-top: 40px;
  margin-left: 30px;
  float: left;
}
#delall {
  margin-top: 35px;
  margin-left: 30px;
  float: left;
}
#page {
  margin-top: 35px;
  margin-left: 150px;
  float: left;
}
</style>
